<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta content="yes" name="apple-mobile-web-app-capable">
<meta content="yes" name="apple-touch-fullscreen">
<title>付款</title>
<link rel="stylesheet" href="css/global.css">
<script src="js/vue.min.js"></script>
<script src="js/axios.min.js"></script>
<link rel="stylesheet" href="css/orderComfirm.css">
</head>
<body>
    <div class="page-order-comfirm" id="orderComfirm">
        <div class="section-con">
            <div class="sec-title-border clearfix">
                <h3>订单支付</h3>
            </div>
            <div class="style-list pay">
                <ul class="clearfix">
                   <li :class="{'selected':payment==1}" @click="payment = 1">
                       <div>
                           <div>支付时间
                               <div>
                                   还剩
                                   <span id="minute_show">0分</span>
                                   <span id="second_show">0秒</span>
                               </div>
                           </div>
                       </div>
                   </li>
                </ul>
            </div>
            <div class="orderBox">
                <div class="orderC-total">
                    <div class="order-t">
                        <dl class="clearfix">
                            <dd class="dl_ddL">商品总额：</dd>
                            <dd class="dl_ddR">￥{{getTotal1.totalPrice.toFixed(2)}}</dd>
                        </dl>
                    </div>
                    <div class="order-fare">
                        <dl class="clearfix">
                            <dd class="dl_ddL">运　　费：</dd>
                            <dd class="dl_ddR">￥{{freight.toFixed(2)}}</dd>
                        </dl>
                    </div>
                    <div class="order-sum">
                        <dl class="clearfix">
                            <dd class="dl_ddL">应付总额：</dd>
                            <dd class="dl_ddR"><span class="fontBig">￥{{(getTotal1.totalPrice + freight).toFixed(2)}}</span></dd>
                        </dl>
                    </div>
                </div>
                <div class="order-message">
                    <dl class="clearfix">
                        <dd class="dl_ddL"></dd>
                        <dd class="dl_ddR"></dd>
                    </dl>
                </div>
                <div class="clear"></div>
                <div class="order-submit">
                    <a href="#" class="btn-red btn-submit" @click="pay">立即付款</a>
                </div>
            </div>
        </div>
    </div>
</body>
<script>
    new Vue({
        el: '#orderComfirm',
        data: {
            productList: [
                {
                    'pro_name': '数码相机',//产品名称
                    'pro_url': '#',//产品链接
                    'pro_dec': '颜色：黑色',//产品参数
                    'pro_person': '杨天',//收货人
                    'pro_img': 'images/test1.jpg',//图片链接
                    'pro_price': 800//单价
                }
            ],
            freight: 10,//运费
            delivery: 1,//配送方式
            payment: 1,//支付方式,
            intDiff: parseInt(1800)
        },
        computed: {
            getTotal1: function () {
                //价格总和
                var _proList = this.productList, totalPrice = 0;
                for (var i = 0, len = _proList.length; i < len; i++) {
                    //总价累加
                    totalPrice += _proList[i].pro_price;
                }
                //选择产品的件数就是_proList.length，总价就是totalPrice
                return {totalPrice: totalPrice}
            },
        },
        mounted() {
            this.getOrderById();
        },
        methods: {
            getOrderById() {
                let then = this;
                let orderId = then.getQueryVariable("orderId");
                axios.get('/order/getOrderById/'+orderId)
                    .then((rep) => {
                        then.intDiff = parseInt(rep.data.data.remainingTime);
                        this.timer(this.intDiff);
                    })
                    .catch(function (error) {
                        console.log(error);
                    });
            },
            getQueryVariable(variable) {
                var query = window.location.search.substring(1);
                var vars = query.split("&");
                for (var i=0;i<vars.length;i++) {
                    var pair = vars[i].split("=");
                    if(pair[0] == variable){return pair[1];}
                }
                return(false);
            },
            timer(intDiff) {
                window.setInterval(function () {
                    var day = 0,
                        hour = 0,
                        minute = 0,
                        second = 0;//时间默认值
                    if (intDiff > 0) {
                        //计算相关的天，小时，还有分钟，以及秒
                        day = Math.floor(intDiff / (60 * 60 * 24));
                        hour = Math.floor(intDiff / (60 * 60)) - (day * 24);
                        minute = Math.floor(intDiff / 60) - (day * 24 * 60) - (hour * 60);
                        second = Math.floor(intDiff) - (day * 24 * 60 * 60) - (hour * 60 * 60) - (minute * 60);
                    }
                    if (minute <= 9) minute = '0' + minute;
                    if (second <= 9) second = '0' + second;
                    document.getElementById('minute_show').innerHTML = '<s></s>' + minute + '分';
                    document.getElementById('second_show').innerHTML = '<s></s>' + second + '秒';
                    intDiff--;
                }, 1000);
            },
            pay() {
                if(this.intDiff <= 0) {
                    window.location.href = "orderlist.html";
                } else {
                    let orderId = this.getQueryVariable("orderId");
                    axios.get('/order/pay/'+orderId)
                        .then((rep) => {
                            window.location.href = "success.html";
                        })
                        .catch(function (error) {
                            console.log(error);
                        });
                }
            }
        }
    })
</script>
</html>